<template>
  <el-menu 
    default-active="/student/grade1"  
    router 
    background-color="#545c64" 
    text-color="white" 
    active-text-color="#ffd04b"
  >
    <!-- 学生管理分组 -->
    <el-sub-menu index="student">
      <template #title>
        <el-icon><User /></el-icon>
        <span>学生管理</span>
      </template>
      <el-menu-item index="/student/grade1">一年级</el-menu-item>
      <el-menu-item index="/student/grade2">二年级</el-menu-item>
      <el-menu-item index="/student/grade3">三年级</el-menu-item>
    </el-sub-menu>

    <!-- 班级管理分组 -->
    <el-sub-menu index="class">
      <template #title>
        <el-icon><School /></el-icon>
        <span>班级管理</span>
      </template>
      <el-menu-item index="/class/grade1">一年级班级</el-menu-item>
      <el-menu-item index="/class/grade2">二年级班级</el-menu-item>
      <el-menu-item index="/class/grade3">三年级班级</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { User, School } from '@element-plus/icons-vue'
</script>

<style lang="less" scoped>
.icons{
    width:18px;
    height:18px;
    margin-right:5px;

}
.el-menu{
    border-right:none;
    h3{
        line-height: 48px;
        color:#fff;
        text-align: center;
    }
}
.el-aside{
    height:100%;
    background-color: #545c64;
}
</style>